@statistic-menu-value-width: 55px;

.status-bar {
    display: flex;
    align-items: center;
    max-width: 332px;

    &.single-mode {
        max-width: 136px;
    }
}

.status-bar-div {
    width: 1px;
    height: 16px;
    margin-left: 10px;
    background: rgb(var(--grey-400, #ccc));
}

.statistic {
    &-list {
        display: flex;
    }

    &-list-column {
        flex-direction: column;
    }

    &-list-column &-item {
        font-size: 12px;
        line-height: 140%;
        color: rgb(var(--grey-500));
    }

    &-item {
        cursor: default;

        overflow: hidden;
        display: flex;
        justify-content: flex-start;

        max-width: 106px;
        margin-right: 8px;

        font-size: var(--font-size-xxs);
        font-weight: 400;
        font-style: normal;
        line-height: 20px; /* 181.818% */
        color: rgb(var(--grey-900));
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover {
            color: rgb(var(--color-black));
        }
    }

    &-picker {
        display: grid;
        gap: var(--margin-sm);
        align-items: center;

        box-sizing: border-box;
        width: 196px;
        padding: var(--padding-base);

        font-size: var(--font-size-xs);

        background-color: rgb(var(--color-white));
        border: 1px solid rgb(var(--border-color));
        border-radius: var(--border-radius-lg);
        box-shadow: var(--box-shadow-lg);
    }

    &-picker-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    &-more {
        transform: rotate(90deg);

        display: flex;
        align-items: center;
        justify-content: center;

        width: 24px;
        height: 24px;

        font-size: 12px;
        color: rgb(var(--grey-600, #e8e8e8));

        border-radius: 4px;

        &:hover {
            background: rgb(var(--grey-300, #e8e8e8));
        }
    }
}
